<template>
    <div ref="dom"></div>
</template>

<script>
import echarts from 'echarts'
import { on, off } from '@/libs/tools'
export default {
  name: 'serviceRequests',
  props: {
    datas: Object,
    text: String,
    subtext: String
  },
  data () {
    return {
      dom: null
    }
  },
  methods: {
    resize () {
      this.dom.resize()
    }
  },
  mounted () {
    let mySeries = []
    for (let i = 0; i < this.datas.legend.length; i++) {
      let item = {}
      item.name = this.datas.legend[i]
      item.type = 'line'
      item.data = this.datas.yAxis[i]
      mySeries.push(item)
    }
    const option = {
      title: { text: this.text, x: 'center', textStyle: { fontSize: 16, color: '#516b91' } },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      grid: {
        top: '15%',
        left: '1.2%',
        right: '3%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: this.datas.xAxis
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: mySeries
      // series: [
      //   {
      //     name: '运营商/网络服务',
      //     type: 'line',
      //     stack: '总量',
      //     areaStyle: { normal: {
      //       color: '#2d8cf0'
      //     } },
      //     data: [120, 132, 101, 134, 90, 230, 210]
      //   },
      //   {
      //     name: '银行/证券',
      //     type: 'line',
      //     stack: '总量',
      //     areaStyle: { normal: {
      //       color: '#10A6FF'
      //     } },
      //     data: [257, 358, 278, 234, 290, 330, 310]
      //   },
      //   {
      //     name: '游戏/视频',
      //     type: 'line',
      //     stack: '总量',
      //     areaStyle: { normal: {
      //       color: '#0C17A6'
      //     } },
      //     data: [379, 268, 354, 269, 310, 478, 358]
      //   },
      //   {
      //     name: '餐饮/外卖',
      //     type: 'line',
      //     stack: '总量',
      //     areaStyle: { normal: {
      //       color: '#4608A6'
      //     } },
      //     data: [320, 332, 301, 334, 390, 330, 320]
      //   },
      //   {
      //     name: '快递/电商',
      //     type: 'line',
      //     stack: '总量',
      //     label: {
      //       normal: {
      //         show: true,
      //         position: 'top'
      //       }
      //     },
      //     areaStyle: { normal: {
      //       color: '#398DBF'
      //     } },
      //     data: [820, 645, 546, 745, 872, 624, 258]
      //   }
      // ]
    }
    this.$nextTick(() => {
      this.dom = echarts.init(this.$refs.dom)
      this.dom.setOption(option)
      on(window, 'resize', this.resize)
    })
  },
  beforeDestroy () {
    off(window, 'resize', this.resize)
  }
}
</script>
